<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Home</title>
		<link rel="stylesheet" href="./css/bootstrap.css">
		<script src="js/jquery-3.6.4.min.js"></script>
		<script src="js/bootstrap.bundle.js"></script>
		
		<link rel="stylesheet" href="./css/css/bootstrap-icons.min.css">
		<style>
			.carousel>div img{
				width: 700px;
				height: 400px;
				transition: 0.5s;
				position: absolute;
			}
			.left_none{
				left: -30%;
				transform: scale(0);
				opacity: 0;
				
			}
			.left{
				left: -10%;
				transform: scale(0.6);
				opacity: 0.4;
				
			}
			.center{
				left: 30%;
				transform: scale(1.3);
				z-index: 2;
				opacity: 1;
			}
			.right{
				left: 70%;
				opacity: 0.4;
				transform: scale(0.6);
			}
			.right_none{
				left: 130%;
				opacity: 0;
				transform: scale(0);
			}
			.act{
				color:#bfbfbf;
				text-shadow: 0 0 20px;
			}
		</style>
	</head>
	<body style="background-color: #461f59;">
		<div class="navbar d-flex sticky-top navbar-expand-md justify-content-end navbar-light"style="background: #e47bd8;">
			<button class="navbar-toggler" data-toggle="collapse" data-target="#top"><span class="navbar-toggler-icon"></span></button>
			<ul class=" nav py-2  collapse navbar-collapse" id="top">
				
				<li class="nav-item">
					<a href="./Home.html" class="text-white text-decoration-none font-weight-bold nav-link">Home</a>
				</li>
				<li class="nav-item dropdown position-relative">
					<a href="#" data-toggle="dropdown" class="text-dark text-decoration-none font-weight-bold nav-link dropdown-toggle">Products</a>
					<ul class="dropdown-menu position-absolute" style="background: #e47bd8;">
						<li class="dropdown-header font-weight-bold text-white">
							title
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item font-weight-bold">
							select
						</li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="./Blog.html" class="text-dark text-decoration-none font-weight-bold nav-link">Bolg</a>
				</li>
				<li class="nav-item">
					<a href="./Our_mission.html" class="text-dark text-decoration-none font-weight-bold nav-link">Our mission</a>
				</li>
				<li class="nav-item">
					<a href="./Price.html" class="text-dark text-decoration-none font-weight-bold nav-link">Purchase</a>
				</li>
			</ul>
		</div>
		<hr>
		<div class="banner position-relative">
			<img src="./img/banner.jpg" class="img-fluid vw-100" style="opacity: 0.3;" alt="">
			<h1 class="position-absolute text-white" style="left: 55%;top: 50%;transform: translate(-50%,-50%) scale(1.3);letter-spacing: 2px;word-spacing: 3px;">
				Time tracking that's easy, powerful, and frictionless.
			</h1>
		</div>
		<hr>
		<div class="carousel position-relative my-5">
			<h3 class="text-white my-5 text-center">
				Toggl builds tools to make your work life more efficient. Toggl Track is our time tracker.
			</h3>
			<div class="container-fluid vw-100 position-relative overflow-hidden my-5" style="height: 400px;">
				<img src="./img/i1.jpg" alt="" class="left_none" data-id="4">
				<img src="./img/i2.png" alt="" class="left" data-id="5">
				<img src="./img/i3.jpg" alt="" class="center" data-id="1">
				<img src="./img/i4.png" alt="" class="right" data-id="2">
				<img src="./img/i5.jpg" alt="" class="right_none" data-id="3">
			</div>
			<ul class="indicator position-absolute list-unstyled d-flex" style="left: 50%; transform: translateX(-50%);">
				<li class="mx-3"><i data-item="1" class="bi bi-circle-fill act"></i></li>
				<li class="mx-3"><i data-item="2" class="bi bi-circle-fill"></i></li>
				<li class="mx-3"><i data-item="3" class="bi bi-circle-fill"></i></li>
				<li class="mx-3"><i data-item="4" class="bi bi-circle-fill"></i></li>
				<li class="mx-3"><i data-item="5" class="bi bi-circle-fill"></i></li>
			</ul>
		</div>
		
		<hr>
		
		<div class="introduce my-5 p-5" style="background-image:linear-gradient(#fef9f7 40%,#fdf1ec 50%);">
			<div class="">
				<h1 class="text-center">
					Time tracking is good for business. <br>
					But it’s also a dreaded chore.
				</h1>
				<h4 class="font-weight-light text-center text-secondary mt-5">
					Skip the timesheets and get your team the best time tracker that gets the job done for you.
				</h4>
				<div class="my-5">
					<h2 class="text-center">
						Here's why teams <span style="color: #e47bd8;transform: rotate(15deg) scale(2);">love</span> Track:
					</h2>
					<div class="row justify-content-center">
						<div class="card border-0 col-12 mx-3  col-lg-3 p-5" style="background: #ffebbd; border-radius:20px;">
							<img src="./img/2.webp" class="card-img mb-5 img-fluid"  alt="">
							<div class="card-text">
								<h4 class="">
									Record 25% more billable hours and improve profitability
								</h4>
								<p>
									No more guesstimates and lost billables. Track your time accurately, improve operational efficiency—and ultimately, maximize your profits.
								</p>
							</div>
						</div>
					
						<div class="card border-0 col-12  mx-3 col-lg-3 p-5" style="background: #f7d8f3; border-radius:20px;">
							<img src="./img/illo-toggl-devices-d06587f566d4b463024dab3bfb702d9a.png" class="card-img img-fluid mb-5" alt="">
							<div class="card-text">
								<h4 class="">
									Multiple time tracking apps and over 100+ integrations
								</h4>
								<p>
									Connect your entire stack, and track time wherever you work—on the web app, on your browser, desktop, mobile or even your watch.								</p>
							</div>
						</div>
						
						<div class="card border-0 col-12 mx-3  col-lg-3 p-5" style="background: #fdeae2; border-radius:20px;">
							<img src="./img/illo-hearthands-ec83cef093ffc7f52b05d2064dfa7bc7.png" class="card-img mb-5 img-fluid" alt="">
							<div class="card-text">
								<h4 class="">
									Get employee buy-in with time tracking that puts privacy on priority
								</h4>
								<p>
									Get accurate data with an anti-surveillance time tracking solution that your employees are happy to use.
								</p>
							</div>
						</div>
						
					</div>
						
				</div>
			</div>
			<div class="">
				<h1 class=" my-5">
					Time tracking software for all your <br>
					productivity and profitability needs
				</h1>
				<div class="row">
					
					<div class="col-lg-4 col-12">
						<h3 class="my-3 my-5">
							Boost accountability
							across teams
						</h3>
						<h5 class="font-weight-light my-5">
							Stay informed, accountable, and transparent. Make payroll and quarterly reporting easy with intuitive time tracking and accurate time reports for growing teams.
						</h5>
						<a href="#" style="color: #e47bd8;">Learn more about employee time tracking</a>
						<p class="my-5 pl-5" style="border-left: 5px solid #461f59;">
							"Toggl Track offers full control to our team members to accurately track their time. It is extremely easy and intuitive, as well as non-invasive."
							Newlogic, Software Consultancy <br>
							<a href="#" class="my-5" style="color: #e47bd8;">Newlogic, Software Consultancy</a>
						</p>
					</div>
					
						<img src="./img/employee-time-tracking.webp" class="col-lg-8 col-12" alt="">
					
				</div>
						
					
						
				</div>
			</div>
		</div>
		<div class="footer vw-100 row m-5">
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					TOGGL GLOBAL
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Blog
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Our Mission
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Working at Toggl
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Legal Terms
					</a>
				</li>
			</ul>
			
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					PRODUCT
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Features
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Pricing
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Integrations
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						API
					</a>
				</li>
			</ul>
			
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					USE CASES
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Billing and Invoicing
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Employee Time Tracking
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Project Budgeting
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Reporting
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Payroll
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Work Hours Tracker
					</a>
				</li>
			</ul>
			
			<ul class="list-unstyled col-6 col-lg-3 my-5">
				<h4 class="text-secondary">
					Help
				</h4>
				<li class="my-3">
					<a href="#" class="text-white">
						Support & Knowledge Base
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Request A Demo
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Contact Us
					</a>
				</li>
				<li class="my-3">
					<a href="#" class="text-white">
						Legal Terms
					</a>
				</li>
			</ul>
			
			
			
		</div>
	</body>
	<script>
		function prev(){
			const ln = document.querySelector('.left_none')
			const left = document.querySelector('.left')
			const center = document.querySelector('.center')
			const right = document.querySelector('.right')
			const rn = document.querySelector('.right_none')
			ln.className = 'left';
			left.className = 'center';
			center.className = 'right';
			right.className = 'right_none';
			rn.className = 'left_none'
			document.querySelector('.act').classList.remove('act')
			document.querySelector(`.indicator li:nth-of-type(${document.querySelector('.center').dataset.id})>i`).classList.add('act')
		}
		function next(){
			const ln = document.querySelector('.left_none')
			const left = document.querySelector('.left')
			const center = document.querySelector('.center')
			const right = document.querySelector('.right')
			const rn = document.querySelector('.right_none')
			rn.className = 'right';
			right.className = 'center';
			center.className = 'left';
			left.className = 'left_none';
			ln.className = 'right_none'
			document.querySelector('.act').classList.remove('act')
			document.querySelector(`.indicator li:nth-of-type(${document.querySelector('.center').dataset.id})>i`).classList.add('act')
		}
		document.querySelector('.carousel').addEventListener('click',function(e){
			if(e.target.className == "right"){
				next()
			}
			if(e.target.className == "left"){
				prev()
			}
		})
		document.querySelector('.indicator').addEventListener('mouseover',function(e){
			if(e.target.tagName == 'I'){
				let times = parseInt(e.target.dataset.item) - parseInt(document.querySelector('.act').dataset.item)
				if(times > 0){
					for(let i = 0 ; i < times ; i++){
						next()
					}
				}
				if(times < 0){
					for(let i = 0 ; i < Math.abs(times) ; i++){
						prev()
					}
				}
			}
		})
		let time = setInterval(next,2000)
		document.querySelector('.carousel').addEventListener('mouseenter',function(e){
			clearInterval(time)
		})
		document.querySelector('.carousel').addEventListener('mouseleave',function(e){
			time = setInterval(next,2000)
		})
	</script>
</html>